<template>
	<div>

		<!-- <el-row>
   <el-col :span="10"> 
						<el-button  @click="doLinkCarMaintain()" type="primary" plain>添加车型</el-button>
   </el-col>
   </el-row> -->
		<div class="srl">
			<span>请选择适配车型</span>
		</div>
		<div v-loading="modelTableLoading">

			<el-row>
				<el-col :span="12">
					<h2 style="display:flex;align-items:center;    padding: 20px 0px;height: 40px;margin: 0;">

<el-button style="margin: 0 20px" type="info" plain="" size="mini" @click="doCancelCar(true,'0000')"  icon="el-icon-delete">清空</el-button>适配车型
</h2>
					<el-table :data="maintainCarList" ref="maintainCarList" highlight-current-row @selection-change="changeCancelList" max-height="500" height="500">
						<!-- <el-table-column type="selection" width="50px" align="center" fixed="left" ></el-table-column> -->
						<el-table-column prop="id" label="车型ID" width="100" sortable>
						</el-table-column>

						<el-table-column prop="seriesName" label="系列名称" width="180" sortable>
						</el-table-column>

						<el-table-column prop="brandName" label="品牌名称" width="100" sortable>
						</el-table-column>
						<el-table-column prop="modelName" label="车型名称" width="200" sortable>
						</el-table-column>

						<el-table-column prop="years" label="年份" width="100" sortable>
						</el-table-column>

						<el-table-column prop="style" label="风格" width="160" sortable>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="120">
							<template slot-scope="scope">
								<el-button @click.native.prevent="doCancelCar(false,scope.row.id)" type="text" style="color:red" size="small" icon="el-icon-delete">
									移除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="block" align="right">
						<br>
						<el-pagination @current-change="handleCurrentProductChange" layout=" prev, pager, next" :page-size="20" :total="pdcount">
						</el-pagination>
					</div>

				</el-col>

				<el-col :span="12">
					<div style="text-align:center;padding:20px 0;position: relative;">

						<el-button @click="screenShow= true ">选择筛选条件</el-button>
						<el-button @click="filterShow2=true">车型ID筛选</el-button>

						<span style="position: absolute;left: 0;" v-show="modelTableShow"> <el-button @click="bindAllCar" type="primary" size="mini">关联{{count}}条结果</el-button></span>
					</div>

					<div style="height:570px">
						<el-table ref="multipleTable" v-show="modelTableShow" :data="modelData.modelList" style="width:100%;font-size:15px" stripe border max-height="500" height="500" @selection-change="setSelected" size="small">
							<!-- <el-table-column type="selection" width="50px" align="center" fixed="left"></el-table-column> -->

							<el-table-column v-for="tableHeader in modelData.headerList" :key="tableHeader.keyId" :label="tableHeader.keyName" min-width="150px" align="center">
								<template slot-scope="scope">
									<div style='width:100%:height:100%'>
										<span>{{scope.row[tableHeader.keyId].text}}</span>
									</div>
								</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" width="120">
								<template slot-scope="scope">
									<el-button @click.native.prevent="addSelectCarByModelId(scope.row.modelId)" type="text" size="small" icon="el-icon-plus" :disabled="scope.row.dis">
										添加关联
									</el-button>
								</template>
							</el-table-column>
						</el-table>

						<div class="block" align="right" v-show="modelTableShow">
							<br>
							<el-pagination @current-change="handleCurrentChange" layout=" prev, pager, next" :page-size="20" :total="count">
							</el-pagination>
						</div>

					</div>

				</el-col>

				<!-- <div style="text-align:center;padding:20px">
              <el-button type="primary" @click="maintainData.doSubmit">保存</el-button>
              <el-button @click="maintainData.show=false" >关闭</el-button>
              </div> -->

			</el-row>

		</div>

		<el-dialog :visible.sync="maintainData.show" title="过滤车型信息" width="90%" :close-on-click-modal='false'>

		</el-dialog>

		<el-dialog :visible.sync="carMainTain.show" width="90%" :close-on-click-modal='false'>

			<el-row :gutter="24">

				<el-col :span="12">
					<div>
						<el-button type="primary" @click="queryColumnNewGroup()">添加栏目至该分组</el-button>
					</div>
					<el-table :data="carGroupMainList" max-height="500" height="500">

						<el-table-column label="序号" type="index" width="55">
						</el-table-column>

						<el-table-column prop="date" label="栏目名字" width="180" sortable>
							<template scope="scope">
								<span>{{ scope.row.maintainColumnName}}</span>
							</template>
						</el-table-column>

						<el-table-column label="操作">
							<template scope="scope">
								<el-button type="primary" size="small" @click="queryEditAttribute(scope.row)">查看属性</el-button>
								<el-button type="danger" size="small" @click="delColumn(scope.row)">删除</el-button>

							</template>
						</el-table-column>

					</el-table>

				</el-col>

				<el-col :span="12">

					<el-table :data="AttributeList" max-height="500" height="500" style="width: 120%;">

						<el-table-column label="序号" type="index" width="55">
						</el-table-column>

						<el-table-column prop="date" label="属性名" sortable>
							<template scope="scope">
								<span>{{ scope.row.maintainName}}</span>
							</template>
						</el-table-column>

						<el-table-column prop="date" label="属性类型" sortable>
							<template scope="scope">
								<span>{{ handleContentType(scope.row.contentType)}}</span>
							</template>
						</el-table-column>

						<el-table-column prop="date" label="显示内容" sortable>
							<template scope="scope">
								<span>{{ scope.row.content}}</span>
							</template>
						</el-table-column>

						<el-table-column prop="date" label="显示状态" sortable>
							<template scope="scope">
								<span>{{scope.row.showStatus ?'显示':'隐藏'}}</span>
							</template>
						</el-table-column>

						<el-table-column prop="date" label="链接内容" sortable>
							<template scope="scope">

								<span>{{ scope.row.contentUrl}}</span>

							</template>
						</el-table-column>

						<el-table-column label="操作" width="200">
							<template scope="scope">
								<el-button type="primary" size="small" @click="queryEidtAttribute(scope.row)">编辑</el-button>

								<el-button :type="scope.row.showStatus ?'danger':''" size="small" @click="eidtAttributeHidden(scope.row)">{{scope.row.showStatus ?'隐藏':'显示'}}</el-button>

							</template>
						</el-table-column>

					</el-table>

				</el-col>

			</el-row>

		</el-dialog>

		<el-dialog :visible.sync="maintainInfoDialog.show" width="90%" :close-on-click-modal='false'>

			<el-table :data="maintainInfoDialog.maintainList" highlight-current-row max-height="300" style="width: 120%;" @selection-change="maintainInfoDialog.onChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="infoId" label="维保信息id" width="100" sortable>
				</el-table-column>

				<el-table-column prop="groupName" label="组名" width="180" sortable>
				</el-table-column>

				<el-table-column prop="infoName" label="维保信息名" width="100" sortable>
				</el-table-column>

				<el-table-column prop="content" label="内容说明" width="200" sortable>
				</el-table-column>

				<el-table-column prop="contentUrl" label="内容说明" width="200" sortable>
				</el-table-column>

			</el-table>

			<span slot="footer" class="dialog-footer">
                <el-button @click="maintainInfoDialog.show=false">取 消</el-button>
                <el-button type="primary" @click="maintainInfoDialog.submitData">确 定</el-button>
            </span>

		</el-dialog>

		<el-dialog title="筛选" :visible.sync="screenShow" width="500" center top="10vh" :close-on-click-modal='false'>
			<div id="limit-switch">
				<!-- <span>筛选结果分页</span><el-switch v-model="limit" active-color="#409EFF" inactive-color="#B4BCCC"></el-switch> -->
			</div>
			<div id="screen-main">

				<el-table :data="list" style="width:100%;" height="500" @selection-change="setKeyIds" size="mini">
					<el-table-column type="selection" width="50" align="center"></el-table-column>
					<el-table-column prop="keyName" label="属性名称" width="200" align="center"></el-table-column>
					<el-table-column label="筛选关键词" align="center" width="250">
						<template slot-scope="scope">
							<el-autocomplete style='width:220px' placeholder="请输入筛选关键词" :value='scope.row.text' @focus="inputFocus(scope.row)" @input="inputed" :fetch-suggestions="querySearch2" size="mini">
								<template slot-scope="props">
									<div class="name">{{ props.item.valueKey }}</div>
								</template>
							</el-autocomplete>
						</template>
					</el-table-column>
				</el-table>

			</div>
			<span slot="footer" class="dialog-footer">
              <el-button @click="screenShow=false">取消</el-button>
              <el-button type="primary" @click="onsubmit">确定</el-button>
            </span>
		</el-dialog>

		<el-dialog title="选择栏目" :visible.sync="columnNewGroupModel" width="50%" center top="10vh" :close-on-click-modal='false'>

			<el-table :data="columnNewGroupList" highlight-current-row max-height="500" height="500" style="width: 120%;" @selection-change="setCarGroupMainList">
				<el-table-column type="selection" width="50" align="center"></el-table-column>
				<el-table-column prop="date" label="栏目名称" sortable>
					<template scope="scope">
						<span>{{ scope.row.maintainColumnName}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="date" label="分类" sortable>
					<template scope="scope">

						<span>   {{scope.row.parentName}} &nbsp; - > &nbsp;  {{scope.row.catName}}</span>
					</template>
				</el-table-column>
			</el-table>

			<span slot="footer" class="dialog-footer">
              <el-button @click="columnNewGroupModel=false">取消</el-button>
              <el-button type="primary" @click="addSubmitAddNewGroup">确定</el-button>
            </span>
		</el-dialog>

		<el-dialog title="编辑属性" :visible.sync="editAttribute" width="70%" center top="10vh" :close-on-click-modal='false'>

			<el-form :model="attributeForm" label-width="8em">

				<el-row :gutter="24" class="row-container">
					<el-col :span="15" :offset="2">

						<el-form-item label="属性名：">
							<span>{{attributeForm.maintainName}}</span>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="24" class="row-container">
					<el-col :span="15" :offset="2">

						<el-form-item label="属性类型：">
							<span>{{handleContentType(attributeForm.contentType)}}</span>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="24" class="row-container">
					<el-col :span="15" :offset="2">
						<el-form-item label="属性显示内容：">
							<el-input v-model="attributeForm.content" placeholder="请输入属性显示内容"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item v-if="attributeForm.contentType==='IMAGE'">
					<el-upload :action="uploadModel.uploadUrl" list-type="picture-card" :on-preview="uploadModel.onPreview" :on-remove="uploadModel.onRemove" :on-success="uploadModel.onUploadSuccess" :file-list="uploadModel.fileList">
						<i class="el-icon-plus"></i>
					</el-upload>

				</el-form-item>
				<el-row :gutter="24" class="row-container" v-if="attributeForm.contentType==='URL'">
					<el-col :span="15" :offset="2">
						<el-form-item label="链接内容：">
							<el-input v-model="attributeForm.contentUrl" placeholder="请输入关联的链接"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

			</el-form>

			<span slot="footer" class="dialog-footer">
              <el-button @click="editAttribute=false">取消</el-button>
              <el-button type="primary" @click="doEditAttribute()">确定</el-button>
            </span>
		</el-dialog>

		<el-dialog title="筛选" :visible.sync="filterShow2" width="580px" center top="50px" :close-on-click-modal='false'>
			<el-table :data="list" style="width:100%;" :height="500" @selection-change="setKeyIds" size="mini" :span-method="objectSpanMethod">
				<el-table-column type="selection" width="50" align="center"></el-table-column>
				<el-table-column prop="keyName" label="属性名称" width="200" align="center"></el-table-column>
				<el-table-column :label="'车型Id ('+countId+')'" align="center" width="250">
					<template slot-scope="scope">
						<div :style="'width:100%;height:'+list.length*36+'px;'">
							<el-input @input="textareaInput" type="textarea" :rows="list.length*1.7" placeholder="请将Excel中的车型Id复制进输入框" v-model="textarea" resize="none"></el-input>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
              <el-button @click="filterShow2=false">取消</el-button>
              <el-button type="primary" @click="idSubmit">确定</el-button>
            </span>
		</el-dialog>
		
		<!--<div><el-button @click="goBack" type="success">返回保养手册数据</el-button></div>-->

	</div>
</template>

<script>
	import * as Api from "@/api/Api.js";
	import * as Config from "@/api/Config.js";
	import * as CarApi from "@/api/CarApi.js";
	import * as MaintainApi from "@/api/GoodsMaintainApi.js";
	import * as RoundApi from "@/api/RoundApi.js";
	import axios from "axios";

	import maintain from "@/components/maintain/MaintainComponent";

	export default {
		data() {
			return {
				pagepdIndex: 0,

				pdcount: 0,
				pageIndex: 1,
				currentPage: 1,
				filterModelType: 'atrr',
				count: 0,
				doCancelCar: (isAll, carIds) => {
					let optMessage = "";

					if(isAll) {
						optMessage = "所有该商品的";
					}
					this.$confirm("此操作将解除关联" + optMessage + "车型, 是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							let modelMove = {
								planId: this.planId,
								carIds: ""
							};
							if(!isAll) {
								// let moveSelectModel = [];
								// this.cancelCar.selectCancelList.forEach((item, index) => {
								//   moveSelectModel.push(item.goodsCarLinkId);
								// });

								modelMove.carIds = carIds
							}

							MaintainApi.cancelPlanLinkCarList(this, modelMove).then(res => {
								if(res.retCode) {
									console.log("取消保养匹配车型", res);
									this.queryColuMainInfo();
								} else {
									this.$message("保存车型错误");
								}
							});
						})
						.catch(() => {
							this.$message({
								type: "info",
								message: "已取消删除"
							});
						});
				},
				cancelCar: {
					show: false,
					selectCancelList: []
				},
				textarea: "",
				filterShow2: false,
				countId: 0,

				ColumnName: "",
				isHide: false,
				initHaveCarList: [],
				attributeForm: {},

				uploadModel: {
					uploadUrl: "",
					fileList: [],
					onRemove: (file, fileList) => {
						this.uploadModel.fileList = fileList;
					},

					onPreview: file => {
						this.imageDialogModel.imageUrl = file.url;
						this.imageDialogModel.show = true;
					},

					onUploadSuccess: (response, file, fileList) => {
						let dt = {
							name: "1.png",
							url: response.data.filename
						};
						this.uploadModel.fileList.push(dt);
					},

					doPreview: () => {}
				},

				AttributeList: [],
				editAttribute: false,
				columnNewGroupModel: false,
				modelTableLoading: false,

				carGroupMainList: [],
				columnNewGroupList: [],
				selectClumnNewGroup: [],
				screenShow: false,
				list: [],
				keyIds: [],
				modelTableShow: false,
				modelData: {}, //列表对象
				//列表
				editerData: {
					show: false,
					selectedModel: [],
					model: {},
					propertyKey: {
						keyId: "",
						keyName: "",
						propertyType: ""
					}
				},
				dialogType: "car",
				maintainColumnList: [],

				maintainCarList: [],

				maintainList: [],
				selectCarIdList: [],
				columnGroupMap: {},
				carMainTain: {
					show: false
				},
				maintainData: {
					show: false,
					groupId: "",

					doSubmit: () => {

						let count = 0;
						this.modelTableLoading = true;
						let addSelectModel = [];
						let moveSelectModel = [];

						this.editerData.selectedModel.forEach((item, caridIndex) => {
							let keyModel = false;
							//选择的
							this.initHaveCarList.forEach((model, modelIndex) => {
								//已有的

								if(item.modelId === model.id) keyModel = true;
							});
							if(!keyModel) {
								addSelectModel.push(item.modelId);
							}
						});

						// this.initHaveCarList.forEach((item, caridIndex) => {
						//   let keyModel = false;
						//   //已有的
						//   this.editerData.selectedModel.forEach((model, modelIndex) => {
						//     //选择的
						//     if (item.id === model.modelId) keyModel = true;
						//   });
						//   if (!keyModel) {
						//     moveSelectModel.push(item.goodsCarLinkId);
						//   }
						// });

						if(addSelectModel.length > 0) {
							let modelAdd = {
								goodsId: this.goodsId,
								carIds: addSelectModel.join(",") //车型ID字符串 逗号隔开
							};
							MaintainApi.doPDLinkCarList(this, modelAdd).then(res => {
								if(res.retCode) {
									console.log("商品匹配车型", res);
									// if (moveSelectModel.length > 0) {
									//   let modelMove = {
									//     goodsId: this.goodsId,
									//     goodsCarLinkIds: moveSelectModel.join(",")
									//   };
									//   MaintainApi.cancelPDLinkCarList(this, modelMove).then(res => {
									//     if (res.retCode) {
									//       console.log("取消商品匹配车型", res);
									//       this.queryColuMainInfo();
									//     } else {
									//       count++;
									//       this.$message("保存车型错误");
									//       this.modelTableLoading = false;
									//     }
									//   });
									// } else {
									//   this.queryColuMainInfo();
									// }
									this.queryColuMainInfo();
								} else {
									count++;
									this.$message("保存车型错误");
								}
							});
						}
						//  else {
						//   if (moveSelectModel.length > 0) {
						//     let modelMove = {
						//       goodsId: this.goodsId,
						//       goodsCarLinkIds: moveSelectModel.join(",")
						//     };
						//     MaintainApi.cancelPDLinkCarList(this, modelMove).then(res => {
						//       if (res.retCode) {
						//         console.log("取消商品匹配车型", res);
						//         this.queryColuMainInfo();
						//       } else {
						//         count++;
						//         this.$message("保存车型错误");
						//         this.modelTableLoading = false;
						//       }
						//     });
						//   } else {
						//     this.queryColuMainInfo();
						//   }
						// }
						if(count == 0) {
							this.$message("匹配成功");
						}
						this.modelTableLoading = false;
					}
				},

				maintainInfoDialog: {
					show: false,
					maintainList: [],

					maintainListSelected: [],

					onChange: value => {
						this.maintainInfoDialog.maintainListSelected = value;
					},

					open: () => {
						console.log("================");
						if(this.maintainCarList.length < 1) {
							this.$alert("请选择车型信息");
							return;
						}
						console.log("-------");
						let carIdList = [];
						for(let i in this.maintainCarList) {
							let dt = this.maintainCarList[i];

							carIdList.push(dt.id);
						}

						let carIdString = carIdList.join(",");

						console.log(carIdList);
						console.log(this.catId);
						console.log("-------");

						MaintainApi.queryMaintainList(this.catId, carIdString).then(res => {
							if(!res.retCode) {
								this.$alert("查询维保关联信息出错");
								return;
							}

							this.maintainInfoDialog.show = true;
							this.maintainInfoDialog.maintainList = res.data;
						});
					},
					submitData: () => {
						for(let i in this.maintainInfoDialog.maintainListSelected) {
							let dt = this.maintainInfoDialog.maintainListSelected[i];
							this.maintainList.push(dt);
						}

						this.maintainInfoDialog.show = false;
					}
				},

				maintainCarDialog: {
					show: false,
					carList: [],

					carListSelected: [],

					checkInArray: dt => {
						for(let i in this.maintainCarList) {
							if(dt.id == this.maintainCarList[i].id) {
								return false;
							}
						}

						return true;
					},

					submitCarList: () => {
						for(let i in this.maintainCarDialog.carListSelected) {
							if(
								this.maintainCarDialog.checkInArray(
									this.maintainCarDialog.carListSelected[i]
								)
							) {
								this.maintainCarList.push(
									this.maintainCarDialog.carListSelected[i]
								);
							}
						}

						this.maintainCarDialog.show = false;
					},

					onChange: vals => {
						Object.assign(this.maintainCarDialog.carListSelected, vals);
					}
					// open: () => {
					//   Api.queryGoodsCarLink(this, this.goodsId).then(res => {
					//     if (!res.retCode) {
					//       this.$alert("查询车型关联信息出错！");
					//       return;
					//     }
					//     this.maintainCarDialog.carList = res.data;
					//   });
					// }
				},

				maintainItems: {
					show: false
				},

				columnModel: {
					show: false,
					name: ""
				},

				groupModel: {
					show: false,
					name: "",
					currentColumnId: ""
				},

				maintainModel: {
					show: false
				}
			};
		},
		props: ["goodsId", "catId", 'planId'],

		watch: {
			goodsId() {
				console.log("query  main....");

				this.loadAllColumn();
			},

		},

		components: {
			maintain
		},

		methods: {
			goBack(){
				this.$emit('goPaln')
			},
			addSelectCarByModelId(modelId) {
				let modelAdd = {
					planId: this.planId,
					carId: modelId
				};
				MaintainApi.doPlanLinkCarList(this, modelAdd).then(res => {
					if(res.retCode) {
						console.log("保养匹配车型", res);
						this.$message("添加关联车型成功");

						// if (moveSelectModel.length > 0) {
						//   let modelMove = {
						//     goodsId: this.goodsId,
						//     goodsCarLinkIds: moveSelectModel.join(",")
						//   };
						//   MaintainApi.cancelPDLinkCarList(this, modelMove).then(res => {
						//     if (res.retCode) {
						//       console.log("取消商品匹配车型", res);
						//       this.queryColuMainInfo();
						//     } else {
						//       count++;
						//       this.$message("保存车型错误");
						//       this.modelTableLoading = false;
						//     }
						//   });
						// } else {
						//   this.queryColuMainInfo();
						// }
						this.queryColuMainInfo();
					} else {
						this.$message("添加关联车型错误");
					}
				});
			},

			tablePage(currentPage) {
				this.loading = true;

				var params = new URLSearchParams();
				for(var i = 0; i < this.modelData.headerList.length; i++) {
					params.append("keyIds", this.modelData.headerList[i].keyId);
				}
				params.append("modelIds", this.modelData.modelIdList);
				params.append("currentPage", currentPage);

				axios
					.post(Config.g_service_url + "/modelfilterbyid", params)
					.then(response => {
						this.filterModelType = 'id'

						if(response.data.status == 200) {
							this.count = response.data.data.total;
							this.modelData = response.data.data;
							this.initSelectnnnn();
						} else {
							this.modelData.modelList = [];
						}
						this.loading = false;
					})
					.catch(error => {});
			},
			handleClick(tab, event) {
				this.pagepdIndex = 0
				this.queryColuMainInfo();
				this.$refs.maintainCarList.doLayout();
			},
			idSubmit: function() {
				// this.modelTableShow = true;
				// this.loading = true;

				var modelData = new Object();
				modelData.headerList = this.keyIds;
				modelData.currentPage = this.currentPage;
				modelData.modelIdList = this.getModelIds();
				modelData.modelList = [];
				this.modelData = modelData;

				this.tablePage(this.currentPage);
				this.filterShow2 = false;
				this.modelTableShow = true;
			},
			getModelIds: function() {
				var texts = [],
					texts = this.textarea.split("\n");
				for(var i = 0; i < texts.length;) {
					var id = 0;
					try {
						id = Number.parseInt(texts[i].trim());
					} catch(error) {}
					if(Number.isNaN(id)) {
						texts.splice(i, 1);
					} else {
						i++;
					}
				}
				return texts;
			},
			textareaInput: function() {
				var texts = [],
					texts = this.getModelIds();
				this.countId = texts.length;
			},
			objectSpanMethod: function({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if(columnIndex === 2) {
					if(rowIndex === 0) {
						return {
							rowspan: this.list.length,
							colspan: 1
						};
					} else {
						return {
							rowspan: 0,
							colspan: 0
						};
					}
				}
			},
			bindAllCar() {
				if(!this.modelData.modelIdList ||
					this.modelData.modelIdList.length === 0
				) {
					return;
				}
				this.$confirm("此操作绑定上所有筛选出来的车型, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						this.modelTableLoading = true;

						let modelAdd = {
							planId: this.planId,
							tempId: this.modelData.tempId //车型ID字符串 逗号隔开
						};
						MaintainApi.doPDPlanCarListByTemp(this, modelAdd).then(res => {
							if(res.retCode) {
								console.log("保养匹配车型", res);
								this.$message("关联成功");
								this.queryColuMainInfo();

								this.initSelectnnnn()

							} else {
								this.$message("关联失败");
								this.modelTableLoading = false;
							}
						});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消绑定"
						});
					});
			},

			filterInit: function() {
				axios
					.post(Config.g_service_url + "/modelfilterinit")
					.then(response => {
						var list = response.data.data;
						for(var i = 0; i < list.length; i++) list[i].text = "";
						this.list = list;
					})
					.catch(error => {});
			},

			setKeyIds: function(val) {
				this.keyIds = val;
			},
			inputFocus: function(row) {
				this.inputRow = row;
			},
			inputed: function(val) {
				this.inputRow.text = val;
			},

			querySearch: function(queryString, callback) {
				axios
					.post(
						Config.g_service_url + "/lenovo",
						"keyId=" + this.inputRow.keyId + "&text=" + queryString
					)
					.then(response => {
						console.log("res", response);
						var rs = response.data.data;
						var restaurants = [];
						for(var i = 0; i < rs.length; i++) {
							restaurants.push({
								valueKey: rs[i].text,
								value: rs[i].text
							});
						}
						//var restaurants = this.restaurants;
						var results = queryString ?
							restaurants.filter(this.createFilter(queryString)) :
							restaurants;
						// 调用 callback 返回建议列表的数据
						callback(results);
					})
					.catch();
			},
			querySearch2: function(queryString, callback) {
				var params = new URLSearchParams();
				params.append("keyId", this.inputRow.keyId);
				params.append("text", queryString);
				for(var i = 0; i < this.list.length; i++) {
					var text = this.list[i].text.trim();
					if(text != "") params.append(this.list[i].keyId, text);
				}
				axios
					.post(Config.g_service_url + "/property/autocomplete", params)
					.then(response => {
						var restaurants = response.data.data;
						//var restaurants = this.restaurants;
						//var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
						//调用 callback 返回建议列表的数据
						callback(restaurants);
					})
					.catch();
			},
			createFilter: function(queryString) {
				return restaurant => {
					return(
						restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
						0
					);
				};
			},

			changeCancelList(val) {
				this.cancelCar.selectCancelList = val;
			},
			setSelected: function(val) {
				console.log(val);
				this.editerData.selectedModel = val;
			},
			//初始化筛选字段
			screenInit: function() {
				if(this.list.length > 0) {
					this.screenShow = !this.screenShow;
				} else {
					RoundApi.initFilterList().then(res => {
						if(res.retCode) {
							console.log("初始化", res);
							this.list = res.data;
						}
					});
				}
				console.log(this.screenShow);
			},

			setKeyIds: function(val) {
				this.keyIds = val;
			},
			handleContentType(row) {
				switch(row) {
					case "IMAGE":
						return "图片";
					case "TEXT":
						return "文本";
					case "URL":
						return "链接";
				}
			},
			initSelectnnnn() {
				console.log("");
				// this.$refs.multipleTable.clearSelection();

				console.log("设置");

				this.editerData.selectedModel = [];
				this.initHaveCarList = [];
				if(!this.modelData.modelList) {
					this.modelTableLoading = false;
					this.isInitSelectnnnn = false;
					return;
				}

				let idArr = this.modelData.modelIdList.slice(
					(this.pageIndex - 1) * 20,
					this.modelData.modelIdList.length < this.pageIndex * 20 ?
					this.modelData.modelIdList.length :
					this.pageIndex * 20
				);

				let pagepdIndex = this.pagepdIndex + 1;
				let selectIdArr = this.selectCarIdList;
				// .slice(
				//   (this.pagepdIndex - 1) * 20,
				//   this.modelData.modelIdList.length < this.pagepdIndex * 20
				//     ? this.modelData.modelIdList.length
				//     : this.pagepdIndex * 20
				// );

				idArr.forEach((model, modelIndex) => {
					let count = 0;
					let opt = {
						dis: false
					};

					selectIdArr.forEach((carid, caridIndex) => {
						parseInt(carid) === model ? count++ : "";
					});
					count > 0 ? (opt.dis = true) : "";

					this.modelData.modelList[modelIndex].dis === undefined ?
						Object.assign(this.modelData.modelList[modelIndex], opt) :
						(this.modelData.modelList[modelIndex].dis = opt.dis);
				});

				this.$refs.multipleTable.doLayout();
				this.modelTableLoading = false;
				this.isInitSelectnnnn = false;

				//   idArr.forEach((model, modelIndex) => {

				// selectIdArr.forEach((carid, caridIndex) => {
				//     if (parseInt(carid) === model) {
				//       this.editerData.selectedModel.push(
				//         this.modelData.modelList[modelIndex]
				//       ); //需要被动态选择的对象
				//       if (this.maintainCarList[caridIndex / pagepdIndex]) {
				//         this.initHaveCarList.push(
				//           this.maintainCarList[caridIndex / pagepdIndex]
				//         ); //不变的已绑定的对象
				//       }
				//     }
				//   });
				// });

				//  setTimeout(() => {
				//       this.editerData.selectedModel.forEach((model, caridIndex) => {
				//         this.$refs.multipleTable.toggleRowSelection(model);
				//       });
				//       this.modelTableLoading = false;
				//       this.isInitSelectnnnn = false;
				//     }, 1000);

			},

			handleCurrentChange(val) {
				console.log(this.filterModelType)
				if(this.filterModelType === 'atrr') {
					this.pageIndex = val;
					this.onsubmit();
				} else {
					this.currentPage = val;
					this.idSubmit();
				}

			},
			onsubmit: function() {
				var params = new URLSearchParams();
				for(var i = 0; i < this.keyIds.length; i++) {
					params.append("keyIds", this.keyIds[i].keyId);
				}
				params.append("currentPage", this.pageIndex);

				console.log(this.list);
				for(var i = 0; i < this.list.length; i++) {
					if(this.list[i].text.trim() != "")
						params.append(this.list[i].keyId, this.list[i].text);
				}
				this.modelTableShow = true;
				this.modelTableLoading = true;
				this.isInitSelectnnnn = true;
				axios
					.post(Config.g_service_url + "/modelfilter", params)
					.then(
						function(response) {
							console.log("筛选之后", response.data);
							this.filterModelType = 'atrr'
							if(response.data.status === 200) {
								this.count = response.data.data.total;
								this.modelData = response.data.data;
								this.initSelectnnnn();
							} else {
								this.$message(response.data.message);
								this.modelTableLoading = false;
								// this.modelTableShow = false;
								this.isInitSelectnnnn = false;
							}
						}.bind(this)
					)
					.catch(error => {
						this.modelTableLoading = false;
						// this.modelTableShow = false;
						this.isInitSelectnnnn = false;
					});

				this.screenShow = false;
			},

			doAddMaintainCar() {
				console.log("===================");

				console.log(this.editerData.selectedModel);

				// this.maintainCarDialog.open();
				console.log("===================");

				this.maintainCarDialog.show = true;
			},

			getMaintainItemData() {
				let dt = this.$refs.maintainDialog.getMaintainList();

				console.log(dt);
			},

			doMaintain() {
				this.maintainItems.show = true;
			},

			submitMaintainData() {
				this.$alert("提交维护信息");
			},

			saveColumnItem() {
				MaintainApi.saveColumnItem(this, {
					goodsId: this.goodsId,
					showStatus: this.isHide,
					maintainColumnName: this.ColumnName
				}).then(res => {
					console.log("修改", res);
					if(res.retCode) {
						this.$message("保存成功");
						this.queryColumnItem();
					}
				});
			},
			queryColumnItem() {
				MaintainApi.queryColumnItem(this, {
					goodsId: this.$route.params.goodsId
				}).then(res => {
					if(res.retCode) {
						if(res.data.length != 0) {
							console.log("查询栏目", res);
							this.ColumnName = res.data[0].columnName;
							this.isHide = res.data[0].showStatus;
						}
					}
				});
			},
			handleCurrentProductChange(val) {
				console.log(val);
				this.pagepdIndex = parseInt(val) - 1;

				this.queryColuMainInfo();
			},
			queryColuMainInfo() {

				// this.goodsId   添加时
				// this.$route.params.goodsId  修改时

				MaintainApi.queryPlanList(this, {
					planId: this.planId,
					page: this.pagepdIndex,
					pageSize: 20
				}).then(res => {
					console.log("查询保养绑定的车型", res);
					if(res.data.carList) {
						this.maintainCarList = res.data.carList;
						this.pdcount = res.data.page.total;
						this.selectCarIdList = res.data.carIdList;

						this.initSelectnnnn();
					}
				});
			},

			doLinkCarMaintain(row) {
				this.maintainData.show = true;

			},
			getCarGroupMainList() {
				MaintainApi.getCarGroupMainList(
					this.maintainData.carGroupId
				).then(res => {
					console.log("查询分组绑定的栏目", res);
					this.carGroupMainList = res.data;
				});
			},
			doLinkMaintain(row) {
				this.AttributeList = [];
				this.maintainData.carGroupId = row.carGroupId;
				this.carMainTain.show = true;
				this.getCarGroupMainList();
			},

			loadAllColumn() {
				MaintainApi.queryColumnandGroup(this.goodsId).then(res => {
					this.maintainColumnList = res.data;

					console.log("maintain .....", res.data);
					console.log("==========>");

					console.log(this.maintainColumnList);
				});
			},

			addGroup() {
				this.groupModel.show = true;
			},
			addColumn() {
				this.columnModel.show = true;
			},
			submitAddColumn() {
				let columnName = this.columnModel.name;

				MaintainApi.addMaintainColumn(this.goodsId, columnName).then(res => {
					if(res.retCode) {
						this.columnModel.show = false;

						this.loadAllColumn();
					} else {
						this.$alert("添加栏目失败");
					}
				});
			},

			setCarGroupMainList(val) {
				console.log(val);
				this.selectClumnNewGroup = val;
			},
			addSubmitAddNewGroup() {
				let catId = [];
				this.selectClumnNewGroup.forEach((item, index) => {
					catId.push(item.maintainColumnId);
				});
				MaintainApi.addGroupNewMainList(
					this.maintainData.carGroupId,
					catId.join(",")
				).then(res => {
					if(res.retCode) {
						this.columnNewGroupModel = !this.columnNewGroupModel;

						this.getCarGroupMainList();
					}
				});
			},
			queryColumnNewGroup() {
				let model = {};
				RoundApi.getMaintainList(this, {
					catId: this.catId
				}).then(res => {
					if(res.retCode) {
						console.log("列表", res);
						this.columnNewGroupModel = !this.columnNewGroupModel;
						this.columnNewGroupList = res.data;
					} else {
						this.$alert("获取栏目失败");
					}
				});
			},

			//显示栏目下的属性
			queryEditAttribute(row) {
				this.maintainColumnId = row.maintainColumnId;
				MaintainApi.queryEditAttribute(
					this.maintainData.carGroupId,
					this.maintainColumnId
				).then(res => {
					if(res.retCode) {
						console.log("查询分组的栏目属性", res);
						this.AttributeList = res.data;
					}
				});
			},
			// 编辑属性
			doEditAttribute() {
				console.log(this.attributeForm);
				if(this.attributeForm.contentType === "IMAGE") {
					let contentUrl = [];
					this.uploadModel.fileList.forEach((item, index) => {
						contentUrl.push(item.url);
					});
					Object.assign(this.attributeForm, {
						contentUrl: contentUrl.join(",")
					});
				}

				MaintainApi.editAttribute(
					this,
					this.attributeForm,
					this.maintainData.carGroupId
				).then(res => {
					if(res.retCode) {
						console.log("编辑属性", res);
						this.queryEditAttribute({
							maintainColumnId: this.maintainColumnId
						});
						this.editAttribute = !this.editAttribute;
					} else {
						this.$alert("保存失败");
					}
				});
			},

			//隐藏 显示
			eidtAttributeHidden(row) {
				let model = {};
				Object.assign(model, row);
				model.showStatus = !model.showStatus;
				MaintainApi.editAttribute(
					this,
					model,
					this.maintainData.carGroupId
				).then(res => {
					console.log(res);
					if(res.retCode) {
						this.$message("保存成功");
						this.queryEditAttribute({
							maintainColumnId: this.maintainColumnId
						});
					} else {
						this.$alert("修改失败");
					}
				});
			},
			// 编辑属性 打开弹窗
			queryEidtAttribute(row) {
				let attributeForm = {};
				Object.assign(attributeForm, row);
				console.log(" attributeForm.contentUrl", attributeForm.contentUrl);
				if(attributeForm.contentType === "IMAGE" && attributeForm.contentUrl) {
					this.uploadModel.fileList = [];
					if(
						attributeForm.contentUrl.split(",").length > 0 &&
						attributeForm.contentUrl.split(",")[0] != ""
					) {
						console.log(1);
						attributeForm.contentUrl.split(",").forEach((item, index) => {
							this.uploadModel.fileList.push({
								name: "1.png",
								url: item
							});
						});
					}
				}
				this.attributeForm = attributeForm;

				this.editAttribute = !this.editAttribute;
			},

			delColumn(row) {
				this.$confirm("此操作将永久删除该栏目, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						MaintainApi.delColumn(
							this,
							row.carGroupMaintainColumnLinkId
						).then(res => {
							console.log(res);
							if(res.retCode) {
								this.$message("删除栏目成功");
								this.getCarGroupMainList();
							} else {
								this.$alert("删除栏目失败");
							}
						});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			},
			delGroup(row) {
				this.$confirm("此操作将永久删除该分组, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						MaintainApi.delGroup(this, row.carGroupId).then(res => {
							if(res.retCode) {
								this.$message("删除分组成功");
								this.loadAllColumn();
							} else {
								this.$alert("删除分组失败");
							}
						});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			},
			submitAddGroup() {
				let groupName = this.groupModel.name;
				console.log(groupName);
				MaintainApi.addColumnGroup(this.goodsId, groupName).then(res => {
					if(res.retCode) {
						this.groupModel.show = false;

						this.loadAllColumn();

						// this.loadAllColumn();
					} else {
						this.$alert("添加栏目失败");
					}
				});
			}
		},
		mounted() {
			this.uploadModel.uploadUrl = Config.g_upload_url;
			this.queryColuMainInfo(); //查询商品绑定的车型
			this.queryColumnItem(); //查询栏目
			this.modelData = [];
			this.list = [];
			this.pageIndex = 1;
			this.currentPage = 1;
			this.screenInit();
		}

	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.srl{
		width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
	}
	.srl>span{
		padding: 0px 100px;
		background: #E5E5E5;
		display: inline-block;
	}

</style>